import React, { Component } from 'react';
import PropTyoes from 'prop-types';
import item from './index.module.css';
export default class Item extends Component {
  static propTypes = {
    id: PropTyoes.string.isRequired,
    name: PropTyoes.string.isRequired,
    done: PropTyoes.bool.isRequired,
    updateTodo: PropTyoes.func.isRequired,
    deleteTodo: PropTyoes.func.isRequired
  }
  
  // 标识移入，移出
  state = { mouse: false }; 
  
  // 鼠标移入，移出回调
  handleMouse = flag => {
    // flag: true:移入 ， falg: 移出
    return () => {
      this.setState({ mouse: flag });
    };
  };
  
  // 勾选取消回调
  handleCheck = id => {
    return e => {
      this.props.updateTodo(this.props.id, e.target.checked);
    };
  };
  handleDelete = (id) => {
    console.log('调用删除按钮', id);
    if (window.confirm('确定删除吗?')) {
      this.props.deleteTodo(id);
    }
  }
  render() {
    const { mouse } = this.state;
    const { id, name, done } = this.props;

    return (
      <li style={{ backgroundColor: mouse ? '#ddd' : 'white' }} onMouseEnter={this.handleMouse(true)} onMouseLeave={this.handleMouse(false)} className={item['todo-list']}>
        <input type="checkbox" checked={done} name="" id="" onChange={this.handleCheck(id)} />
        <span>{name}</span>
        <button onClick={() => this.handleDelete(id)} className="btn btn-danger" style={{ display: mouse ? 'block' : 'none' }}>
          删除
        </button>
      </li>
    );
  }
}
